$(function () {
  // 节流阀，互斥锁
  var flag = true;
  // 电梯导航
  $(window).scroll(function () {
    fixedtool();
    if(flag) {
      $('.floor .w').each(function (index, element) {
        if($(window).scrollTop() >= $(element).offset().top){
          $('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
        }
      })
    }
  });

  $('.fixedtool li').click(function () {
    flag = false;
    $(this).addClass('current').siblings().removeClass();
    var current = $('.floor .w').eq($(this).index()).offset().top;
    $('html, body').stop().animate({
      scrollTop: current
    }, function () {
      flag = true;
    });
  })

  fixedtool();

  function fixedtool () {
    if($(window).scrollTop() >= $('.recommend').offset().top){
      $('.fixedtool').fadeIn();
    }else {
      $('.fixedtool').fadeOut();
    }
  }
});

window.onload = function () {
  var focus = document.querySelector('.focus');
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
  });
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(() => {
      arrow_r.click();
    }, 2000);
  });
  for(var i = 0; i < ul.children.length; i++) {
    var li = this.document.createElement('li');
    li.setAttribute('index', i);
    ol.appendChild(li);
    li.addEventListener('click', function () {
      var index = this.getAttribute('index');
      var left = -1 * index * focus.offsetWidth;
      // 每点一个小li，就要滚动图片的位置
      animate(ul, left);
      liChange(this);
      num = index;
    });
  }
  ol.children[0].className = 'current';
  // 循环图片，克隆第一张放到尾部
  ul.appendChild(ul.children[0].cloneNode(true));
  var num = 0;
  var flag = true;// 节流阀，水龙口开关控制是否完成一次图片滚动，防止不停的点
  arrow_l.addEventListener('click',  function () {
    if(flag){
      flag = false;
      if(num == 0){
        num = ul.children.length-1;
        ul.style.left = -1 * num * focus.offsetWidth + 'px';
      }
      num--;
      var left = -1 * num * focus.offsetWidth;
      animate(ul, left, function () {
        flag = true;
      });
      liChange(ol.children[num%ol.children.length]);
    }
  });
  arrow_r.addEventListener('click',  function () {
    if(flag){
      flag = false;
      if(num == ul.children.length-1){
        num = 0;
        ul.style.left = 0;
      }
      num++;
      var left = -1 * num * focus.offsetWidth;
      animate(ul, left, function () {
        flag = true;
      });
      liChange(ol.children[num%ol.children.length]);
    }
  });
  var timer = setInterval(() => {
    arrow_r.click();
  }, 2000);

  function liChange(obj) {
    // 排他思想，给点击的小li加上样式
    for(var i = 0; i < ol.children.length; i++){
      ol.children[i].className = '';
    }
    obj.className = 'current';
  }
}